<template>
  <div class="system-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>系统管理</span>
        </div>
      </template>
      
      <div class="system-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="feature-card" @click="$router.push('/system/user')">
              <div class="feature-icon">
                <el-icon size="48" color="#409EFF">
                  <User />
                </el-icon>
              </div>
              <div class="feature-title">用户管理</div>
              <div class="feature-desc">
                管理系统用户，配置用户权限和角色
              </div>
            </div>
          </el-col>
          
          <el-col :span="8">
            <div class="feature-card" @click="$router.push('/system/role')">
              <div class="feature-icon">
                <el-icon size="48" color="#67C23A">
                  <Avatar />
                </el-icon>
              </div>
              <div class="feature-title">角色管理</div>
              <div class="feature-desc">
                配置系统角色和权限管理
              </div>
            </div>
          </el-col>
          
          <el-col :span="8">
            <div class="feature-card" @click="$router.push('/system/menu')">
              <div class="feature-icon">
                <el-icon size="48" color="#E6A23C">
                  <Menu />
                </el-icon>
              </div>
              <div class="feature-title">菜单管理</div>
              <div class="feature-desc">
                配置系统菜单和导航结构
              </div>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="8">
            <div class="feature-card" @click="$router.push('/system/tenant')">
              <div class="feature-icon">
                <el-icon size="48" color="#00CED1">
                  <OfficeBuilding />
                </el-icon>
              </div>
              <div class="feature-title">租户管理</div>
              <div class="feature-desc">
                管理多租户配置和资源分配
              </div>
            </div>
          </el-col>
          
          <el-col :span="8">
            <div class="feature-card" @click="handleSystemConfig">
              <div class="feature-icon">
                <el-icon size="48" color="#F56C6C">
                  <Tools />
                </el-icon>
              </div>
              <div class="feature-title">系统配置</div>
              <div class="feature-desc">
                系统参数配置和运行环境设置
              </div>
            </div>
          </el-col>
          
          <el-col :span="8">
            <div class="feature-card" @click="handleLogManagement">
              <div class="feature-icon">
                <el-icon size="48" color="#909399">
                  <Document />
                </el-icon>
              </div>
              <div class="feature-title">日志管理</div>
              <div class="feature-desc">
                查看系统日志和操作记录
              </div>
            </div>
          </el-col>
        </el-row>
        
        <el-divider />
        
        <div class="system-info">
          <el-descriptions title="系统信息" :column="2" border>
            <el-descriptions-item label="系统版本">v1.0.0</el-descriptions-item>
            <el-descriptions-item label="运行环境">开发环境</el-descriptions-item>
            <el-descriptions-item label="数据库版本">MySQL 8.0</el-descriptions-item>
            <el-descriptions-item label="Redis版本">Redis 7.0</el-descriptions-item>
            <el-descriptions-item label="系统时间">2024-01-15 14:30:25</el-descriptions-item>
            <el-descriptions-item label="运行时长">3天 12小时</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { User, Avatar, Menu, Tools, Document, OfficeBuilding } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const handleSystemConfig = () => {
  // 跳转到系统配置
  console.log('系统配置功能开发中...')
}

const handleLogManagement = () => {
  // 跳转到日志管理
  console.log('日志管理功能开发中...')
}
</script>

<style scoped>
.system-container {
  padding: 20px;
}

.card-header {
  font-weight: bold;
  color: #303133;
}

.system-content {
  padding: 20px 0;
}

.feature-card {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 20px;
}

.feature-card:hover {
  background: #ffffff;
  border-color: #409EFF;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
  transform: translateY(-2px);
}

.feature-icon {
  margin-bottom: 15px;
}

.feature-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 10px;
}

.feature-desc {
  font-size: 14px;
  color: #909399;
  line-height: 1.5;
}

.system-info {
  margin-top